<!doctype html>
<html lang="en">
 <head> 
  <meta charset="UTF-8"> 
  <meta name="description" content="燎火的个人博客"> 
  <meta name="keyword" content="燎火,qq799378666,软件开发,java,c#,js,html,html5,css"> 
  <title>HTML 5 Canvas 参考手册</title> 
  <script src="/js/jquery-1.11.1.min.js"></script> 
  <script src="/js/bootstrap-3.3.5/js/bootstrap.js"></script> 
  <link href="/js/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet"> 
  <script src="/js/base.js"></script> 
  <script src="/js/nav.js"></script> 
  <script src="/js/jquery.toTop.min.js"></script> 
  <link href="/style/article.css" rel="stylesheet"> 
 </head> 
 <body> 
  <div id="main"> 
   <h3 id="title">HTML 5 Canvas 参考手册</h3> 
   <div id="content">
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">描述</h2>
    <p style="margin-top: 12px; margin-bottom: 0px; padding: 0px; border: 0px; line-height: 18px;">HTML5 &lt;canvas&gt; 标签用于绘制图像（通过脚本，通常是 JavaScript）。</p>
    <p style="margin-top: 12px; margin-bottom: 0px; padding: 0px; border: 0px; line-height: 18px;">不过，&lt;canvas&gt; 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。</p>
    <p style="margin-top: 12px; margin-bottom: 0px; padding: 0px; border: 0px; line-height: 18px;">getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。</p>
    <p style="margin-top: 12px; margin-bottom: 0px; padding: 0px; border: 0px; line-height: 18px;">本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。</p>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">浏览器支持</h2>
    <p style="margin-top: 12px; margin-bottom: 0px; padding: 0px; border: 0px; line-height: 18px;">Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 &lt;canvas&gt; 及其属性和方法。</p>
    <p class="note" style="margin-top: 12px; margin-bottom: 0px; padding: 0px; border: 0px; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">注释：</span>Internet Explorer 8 以及更早的版本不支持 &lt;canvas&gt; 元素。</p>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">颜色、样式和阴影</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">属性</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_fillstyle.asp" title="HTML5 canvas fillStyle 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">fillStyle</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回用于填充绘画的颜色、渐变或模式</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_strokestyle.asp" title="HTML5 canvas strokeStyle 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">strokeStyle</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回用于笔触的颜色、渐变或模式</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_shadowcolor.asp" title="HTML5 canvas shadowColor 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">shadowColor</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回用于阴影的颜色</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_shadowblur.asp" title="HTML5 canvas shadowBlur 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">shadowBlur</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回用于阴影的模糊级别</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_shadowoffsetx.asp" title="HTML5 canvas shadowOffsetX 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">shadowOffsetX</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回阴影距形状的水平距离</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_shadowoffsety.asp" title="HTML5 canvas shadowOffsetY 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">shadowOffsetY</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回阴影距形状的垂直距离</td>
      </tr>
     </tbody>
    </table>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">方法</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_createlineargradient.asp" title="HTML5 canvas createLinearGradient() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">createLinearGradient()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">创建线性渐变（用在画布内容上）</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_createpattern.asp" title="HTML5 canvas createPattern() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">createPattern()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">在指定的方向上重复指定的元素</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_createradialgradient.asp" title="HTML5 canvas createRadialGradient() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">createRadialGradient()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">创建放射状/环形的渐变（用在画布内容上）</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_addcolorstop.asp" title="HTML5 canvas addColorStop() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">addColorStop()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定渐变对象中的颜色和停止位置</td>
      </tr>
     </tbody>
    </table>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">线条样式</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">属性</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_linecap.asp" title="HTML5 canvas lineCap 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">lineCap</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回线条的结束端点样式</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_linejoin.asp" title="HTML5 canvas lineJoin 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">lineJoin</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回两条线相交时，所创建的拐角类型</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_linewidth.asp" title="HTML5 canvas lineWidth 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">lineWidth</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回当前的线条宽度</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_miterlimit.asp" title="HTML5 canvas miterLimit 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">miterLimit</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回最大斜接长度</td>
      </tr>
     </tbody>
    </table>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">矩形</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">方法</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_rect.asp" title="HTML5 canvas rect() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">rect()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">创建矩形</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_fillrect.asp" title="HTML5 canvas fillRect() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">fillRect()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">绘制“被填充”的矩形</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_strokerect.asp" title="HTML5 canvas strokeRect() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">strokeRect()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">绘制矩形（无填充）</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_clearrect.asp" title="HTML5 canvas clearRect() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">clearRect()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">在给定的矩形内清除指定的像素</td>
      </tr>
     </tbody>
    </table>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">路径</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">方法</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_fill.asp" title="HTML5 canvas fill() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">fill()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">填充当前绘图（路径）</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_stroke.asp" title="HTML5 canvas stroke() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">stroke()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">绘制已定义的路径</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_beginpath.asp" title="HTML5 canvas beginPath() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">beginPath()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">起始一条路径，或重置当前路径</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_moveto.asp" title="HTML5 canvas moveTo() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">moveTo()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">把路径移动到画布中的指定点，不创建线条</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_closepath.asp" title="HTML5 canvas closePath() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">closePath()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">创建从当前点回到起始点的路径</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_lineto.asp" title="HTML5 canvas lineTo() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">lineTo()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">添加一个新点，然后在画布中创建从该点到最后指定点的线条</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_clip.asp" title="HTML5 canvas clip() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">clip()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">从原始画布剪切任意形状和尺寸的区域</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_quadraticcurveto.asp" title="HTML5 canvas quadraticCurveTo() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">quadraticCurveTo()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">创建二次贝塞尔曲线</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_beziercurveto.asp" title="HTML5 canvas bezierCurveTo() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">bezierCurveTo()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">创建三次方贝塞尔曲线</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_arc.asp" title="HTML5 canvas arc() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">arc()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">创建弧/曲线（用于创建圆形或部分圆）</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_arcto.asp" title="HTML5 canvas arcTo() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">arcTo()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">创建两切线之间的弧/曲线</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_ispointinpath.asp" title="HTML5 canvas isPointInPath() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">isPointInPath()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">如果指定的点位于当前路径中，则返回 true，否则返回 false</td>
      </tr>
     </tbody>
    </table>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">转换</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">方法</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_scale.asp" title="HTML5 canvas scale() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">scale()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">缩放当前绘图至更大或更小</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_rotate.asp" title="HTML5 canvas rotate() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">rotate()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">旋转当前绘图</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_translate.asp" title="HTML5 canvas translate() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">translate()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">重新映射画布上的 (0,0) 位置</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_transform.asp" title="HTML5 canvas transform() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">transform()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">替换绘图的当前转换矩阵</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_settransform.asp" title="HTML5 canvas setTransform() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">setTransform()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">将当前转换重置为单位矩阵。然后运行 transform()</td>
      </tr>
     </tbody>
    </table>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">文本</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">属性</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_font.asp" title="HTML5 canvas font 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">font</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回文本内容的当前字体属性</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_textalign.asp" title="HTML5 canvas textAlign 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">textAlign</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回文本内容的当前对齐方式</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_textbaseline.asp" title="HTML5 canvas textBaseline 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">textBaseline</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回在绘制文本时使用的当前文本基线</td>
      </tr>
     </tbody>
    </table>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">方法</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_filltext.asp" title="HTML5 canvas fillText() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">fillText()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">在画布上绘制“被填充的”文本</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_stroketext.asp" title="HTML5 canvas strokeText() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">strokeText()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">在画布上绘制文本（无填充）</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_measuretext.asp" title="HTML5 canvas measureText() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">measureText()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">返回包含指定文本宽度的对象</td>
      </tr>
     </tbody>
    </table>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">图像绘制</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">方法</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_drawimage.asp" title="HTML5 canvas drawImage() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">drawImage()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">向画布上绘制图像、画布或视频</td>
      </tr>
     </tbody>
    </table>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">像素操作</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">属性</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_imagedata_width.asp" title="HTML5 canvas width 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">width</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">返回 ImageData 对象的宽度</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_imagedata_height.asp" title="HTML5 canvas height 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">height</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">返回 ImageData 对象的高度</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_imagedata_data.asp" title="HTML5 canvas data 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">data</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">返回一个对象，其包含指定的 ImageData 对象的图像数据</td>
      </tr>
     </tbody>
    </table>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">方法</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_createimagedata.asp" title="HTML5 canvas createImageData() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">createImageData()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">创建新的、空白的 ImageData 对象</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_getimagedata.asp" title="HTML5 canvas getImageData() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">getImageData()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_putimagedata.asp" title="HTML5 canvas putImageData() 方法" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">putImageData()</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">把图像数据（从指定的 ImageData 对象）放回画布上</td>
      </tr>
     </tbody>
    </table>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">合成</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">属性</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_globalalpha.asp" title="HTML5 canvas globalAlpha 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">globalAlpha</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回绘图的当前 alpha 或透明值</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><a href="http://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp" title="HTML5 canvas globalCompositeOperation 属性" style="margin: 0px; padding: 0px; border: 0px; color: rgb(144, 11, 9); background: transparent;">globalCompositeOperation</a></td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">设置或返回新图像如何绘制到已有的图像上</td>
      </tr>
     </tbody>
    </table>
    <h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px;">其他</h2>
    <table class="dataintable" width="708">
     <tbody style="margin: 0px; padding: 0px; border: 0px;">
      <tr style="margin: 0px; padding: 0px; border: 0px;" class="firstRow">
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left; width: 190.2px;">方法</th>
       <th style="margin: 0px; padding-right: 15px; padding-left: 6px; border-color: rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213); text-align: left;">描述</th>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">save()</td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">保存当前环境的状态</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">restore()</td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">返回之前保存过的路径状态和属性</td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">createEvent()</td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><br></td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">getContext()</td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><br></td>
      </tr>
      <tr style="margin: 0px; padding: 0px; border: 0px;">
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">toDataURL()</td>
       <td style="margin: 0px; padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><br></td>
      </tr>
     </tbody>
    </table>
    <p><br></p>
   </div> 
  </div>  
 </body>
</html>